<template>
<div class="process-tpl__form">
  <div class="process-tpl__form-title">流程处理</div>
  <div class="process-tpl__form-item" v-if="isStart">
    <div class="process-tpl__form-item-label">紧急程度</div>
    <div class="process-tpl__form-item-content">
      <p-radio-group v-model="form.level" :disabled="!isStart">
        <p-radio :value="1">一般</p-radio>
        <p-radio :value="2">急</p-radio>
        <p-radio :value="3">紧急</p-radio>
      </p-radio-group>
    </div>
  </div>
  <div class="process-tpl__form-item" v-else-if="showHandle">
    <div class="process-tpl__form-item-label">操作</div>
    <div class="process-tpl__form-item-content">
      <p-radio-group :value="submitType" @change="change">
        <template v-if="!canWithdraw">
          <p-radio :value="SUBMIT_TYPES.AGREE">同意</p-radio>
          <p-radio :value="SUBMIT_TYPES.REJECT">驳回</p-radio>
          <p-radio :value="SUBMIT_TYPES.TRANSFER" @click.native="getTransferor">
            <span>转办</span>
            <span v-if="submitType === SUBMIT_TYPES.TRANSFER && transferor">：{{ transferor.name }}</span>
          </p-radio>
        </template>
        <p-radio v-else :value="SUBMIT_TYPES.WITHDRAW">撤回</p-radio>
      </p-radio-group>
    </div>
  </div>
  <look-one :modal="true" :title="'转办'" ref="lookOne" />
  <div class="process-tpl__form-item">
    <div class="process-tpl__form-item-label">处理意见</div>
    <div class="process-tpl__form-item-content between">
      <p-input
        v-model="form.remark"
        type="textarea"
        placeholder="请输入内容"
        resize="none"
        style="width: calc( 100% - 72px);min-height: 52px;"
      />
      <p-button @click="submit" :loading="loading" class="process-tpl__form-submit-btn" type="primary">提交</p-button>
    </div>
  </div>
</div>
</template>

<script>
import LookOne from './lookOne.vue'

// 操作类型
const SUBMIT_TYPES = {
  AGREE: 'agree', // 同意 OR 创建流程
  REJECT: 'reject', // 驳回
  TRANSFER: 'transfer', // 转办
  WITHDRAW: 'withdraw' // 撤回
}

export default {
  inject: ['action', 'isStart', 'showHandle', 'canWithdraw'],
  components: { LookOne },
  props: {
    submitType: { type: String, default: '' },
    defaultForm: { type: Object, default: null }
  },
  data () {
    return {
      SUBMIT_TYPES,
      form: {
        level: 1,
        remark: '',
        assigneeId: ''
      },
      loading: false
    }
  },
  computed: {
    // 转办人
    transferor () {
      return this.$refs.lookOne.curItem[0] || null
    }
  },
  watch: {
    defaultForm: {
      immediate: true,
      deep: true,
      handler() {
        if(this.defaultForm) {
          this.form.level = this.defaultForm.level || 1
          this.form.remark = this.defaultForm.remark || ''
        }
      }
    }
  },
  methods: {
    submit () {
      this.form.assigneeId = this.submitType === SUBMIT_TYPES.TRANSFER ? this.transferor.uid : ''
      this.$emit('submit', this.form)
    },
    change (e) {
      this.$emit('update:submitType', e.target.value)
    },
    getTransferor () {
      this.$refs.lookOne.startVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.process-tpl__form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.process-tpl__form-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.process-tpl__form-item {
  min-height: 35px;
  display: flex;
  border: 1px solid #e8e8e8;
  &:not(:last-child) {
    border-bottom: none;
  }
}
.process-tpl__form-item-label {
  flex: 1;
  border-right: 1px solid #e8e8e8;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.process-tpl__form-item-content {
  flex: 1;
  padding: 0 16px;
  display: flex;
  align-items: center;
  &.between {
    justify-content: space-between;
    padding: 3px 16px;
  }
}
.process-tpl__form-submit-btn {
  align-self: baseline;
  height: 52px;
}
</style>
